<template>
    <transition name="fade">
        <div class="loading" v-if="visual">
            <div class="square"></div>
            <div v-if="text" class="text">{{text}}</div>
        </div>
    </transition>
</template>

<script>
export default {
  props: {
    text: String,
    visual: Boolean
  }
}
</script>

<style scoped lang="scss">
.loading{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #ffffff;
    box-shadow: 4px 4px 18px 0px rgba(238, 173, 81, 0.69);
    border-radius: 8px;
    .text{
        font-size: 20px;
        color:#727171;
    }
    padding: 40px;
}
.square{
    width: 40px;
    height: 40px;
    border: 3px rgba(255,156,75,1) solid;
    margin: 36px auto;
    position: relative;
    animation: fill_color 5s linear infinite;
}
.square:after {
    width: 8px;
    height: 8px;
    position: absolute;
    content: "";
    background-color: rgba(255,156,75,1);
    top: -16px;
    left: 0px;
    animation: square_check 1s ease-in-out infinite;
}
@keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);}
}
@keyframes square_check{
    25%{ left: 44px; top: -16px;}
    50%{ left: 44px; top: 44px;}
    75%{ left: -18px; top: 44px;}
    100%{ left: -18px; top: -14px;}
}
</style>
